<!--
 Author: Li
 Date: 7/28/2025 23:03
 Description: 文化热点
-->
<template>
  <div class="hot-container">
    <div class="header">
      <div class="left">
        <div class="icon-wrapper">
          <image class="icon" :src="IconTitle"></image>
        </div>
        <div class="title">文化热点</div>
      </div>
      <div class="right">
        <span>更多</span>
        <wd-icon name="chevron-right" size="16px"></wd-icon>
      </div>
    </div>
    <div class="list">
      <div class="item" v-for="item in contentList" :key="item.id">
        <div class="left">
          <image class="banner" :src="item.banner" mode="aspectFill"></image>
        </div>
        <div class="right">
          <div class="title">{{ item.title }}</div>
          <div class="info">
            <div class="author">{{ item.author }}</div>
            <div class="time">{{ item.time }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import BgDemo4 from '@/assets/bg-demo4.jpg';
import BgDemo5 from '@/assets/bg-demo5.jpg';
import BgDemo6 from '@/assets/bg-demo6.jpg';
import BgDemo7 from '@/assets/bg-demo7.jpg';
import IconTitle from '@/assets/icon-title-act.svg';

const contentList = ref([
  {
    id: 1,
    title:
      '文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题',
    banner: BgDemo4,
    author: '腾讯新闻',
    time: '1天前',
  },
  {
    id: 2,
    title: '文章标题文章标题文章标题文章标题文章标题',
    banner: BgDemo5,
    author: '腾讯新闻',
    time: '1天前',
  },
  {
    id: 3,
    title: '文章标题文章标题文章标题文章标题文章标题',
    banner: BgDemo6,
    author: '腾讯新闻',
    time: '1天前',
  },
  {
    id: 4,
    title: '文章标题文章标题文章标题文章标题文章标题',
    banner: BgDemo7,
    author: '腾讯新闻',
    time: '1天前',
  },
]);
</script>

<style scoped lang="scss">
.hot-container {
  padding: 20rpx 30rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  .left {
    //border: 1px dashed black;

    .icon {
      width: 140rpx;
      height: 32rpx;
    }

    .title {
      font-size: 32rpx;
      color: $text-color;
    }
  }

  .right {
    //border: 1px dashed black;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: $text-color;
    font-size: 26rpx;
  }
}

.list {
  margin-top: 30rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;

  .item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    //border: 1px dashed black;
    gap: 20rpx;
    height: 170rpx;

    .left {
      //border: 1px dashed black;
      font-size: 0;

      .banner {
        width: 250rpx;
        height: 170rpx;
        border-radius: 16rpx;
      }
    }

    .right {
      //border: 1px dashed black;
      flex: 1;
      width: calc(100% - 250rpx - 20rpx);
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 8rpx 0;
      box-sizing: border-box;

      .title {
        width: 100%;
        //border: 1px dashed black;
        @include line-clamp-2();
        font-size: 30rpx;
        color: $text-color;
      }

      .info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 22rpx;
        color: #ad9268;
      }
    }
  }
}
</style>
